<template>
  <div class="landing-page">
    <div class="hero-section">
      <h1>Fewer errors means higher-quality APIs</h1>
      <p class="subtitle">
        Move fast to build quality APIs—without breaking anything—by managing
        every phase of the API workflow, together, on a single platform.
      </p>
    </div>

    <div class="content-wrapper">
      <div class="image-section">
        <div class="image-placeholder">
          <img src="imgs/5.png" alt=""/>
        </div>
      </div>

      <div class="features-section">
        <div class="feature-card" :class="{ expanded: activeCard === 0 }">
          <div class="feature-header" @click="toggleCard(0)">
            <h2>Discover, share, and run tests, together</h2>
            <button class="toggle-btn">{{ activeCard === 0 ? '−' : '+' }}</button>
          </div>
          <div class="feature-content" :class="{ active: activeCard === 0 }">
            <p>
              Avoid building from scratch or writing lengthy descriptions about API
              issues by storing and sharing APIs in Collections.
            </p>
          </div>
        </div>

        <div class="feature-card" :class="{ expanded: activeCard === 1 }">
          <div class="feature-header" @click="toggleCard(1)">
            <h2>Change doesn't have to be hard</h2>
            <button class="toggle-btn">{{ activeCard === 1 ? '−' : '+' }}</button>
          </div>
          <div class="feature-content" :class="{ active: activeCard === 1 }">
            <p>
              Implement changes confidently with version control for APIs. Track changes,
              prevent conflicts, and roll back when needed.
            </p>
          </div>
        </div>

        <div class="feature-card" :class="{ expanded: activeCard === 2 }">
          <div class="feature-header" @click="toggleCard(2)">
            <h2>Debug and write tests with Postbot</h2>
            <button class="toggle-btn">{{ activeCard === 2 ? '−' : '+' }}</button>
          </div>
          <div class="feature-content" :class="{ active: activeCard === 2 }">
            <p>
              Let Postbot help you write and debug tests faster. Get AI-powered
              suggestions and automated test generation.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LandingPage',
  data() {
    return {
      activeCard: 0
    }
  },
  methods: {
    toggleCard(index) {
      this.activeCard = this.activeCard === index ? null : index
    }
  }
}
</script>

<style scoped>
.landing-page {
  padding: 40px;
  max-width: 1440px;
  margin: 0 auto;
}

.hero-section {
  margin-bottom: 40px;
}

h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 20px;
  color: #333;
  max-width: 800px;
  line-height: 1.5;
}

.content-wrapper {
  display: flex;
  gap: 40px;
}

.image-section {
  flex: 2;
}

.image-placeholder {
  background-color: #f5f5f5;
  border: 2px dashed #ddd;
  border-radius: 8px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.features-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-card {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}

.feature-header:hover h2 {
  color: #555;
}

.feature-header h2 {
  font-size: 34px;
  font-weight: bold;
  margin: 0;
  transition: color 0.3s ease;
}

.toggle-btn {
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background-color: #f5f5f5;
}

.feature-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
  opacity: 0;
}

.feature-content.active {
  max-height: 200px;
  opacity: 1;
  margin-top: 20px;
}

.feature-content p {
  line-height: 1.6;
  color: #666;
  font-size: 18px;
}

.expanded {
  margin-bottom: 20px;
}
</style>